npm install echarts --save

plugins
  echarts.js
    import Vue from 'vue'
    import * as echarts from 'echarts' // 引入echarts
    // Vue.use(echarts)
    Vue.prototype.$echarts = echarts // 引入组件（将echarts注册为全局）
  nuxt.config.js
    plugins:[
      '@/plugins/echarts'
    ]
index.vue
<div class="Echarts" style="position: relative;">
  <div v-show="chartOne==1" id="echartsMainOne" style="width: 500px;height:350px;"></div>
  <div v-show="chartOne==1">
    <div style="position:absolute;bottom:45px;left: 105px;;">最低￥2001</div>
    <div style="position:absolute;bottom:45px;right: 55px;">最高￥79850</div>
  </div>
  <div v-show="chartOne==2" id="echartsMainFour" style="width: 500px;height:350px;"></div>
</div>

<div class="Echarts">
  <div id="echartsMainTwo" style="width: 500px;height:350px;"></div>
</div>

<script>
  export default {
    name: 'IndexPage',
    data() {
      return {
        chartOne: 1,
      }
    },
    methods: {
      myEchartsOne() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('echartsMainOne'));
        // 指定图表的配置项和数据
        var option = {
          //标题
          // title: {
          //   text: 'ECharts 入门示例'
          // },
          tooltip: {
            trigger: 'axis',	//竖向辅助线
            // axisPointer: { type: 'cross' }	//横向辅助线
          },
          // legend: {
          //   data: ['整体分布']
          // },
          xAxis: {
            // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            data: ['', '', '', '', '']
          },
          yAxis: {
            // max:20,// 总行高
          },
          series: [{
            name: '人数',	//属性
            type: 'bar',	//柱形图
            data: [899325, 1942812, 546888, 157387, 110471],	//属性
            barWidth: '40%',	//柱形图宽度
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0],	//柱状图上方两个圆角
              color: '#12c19e',	//颜色
            },
            // barGap:'4',/*多个并排柱子设置柱子之间的间距*/
            // barCategoryGap:'5%',/*多个并排柱子设置柱子之间的间距*/
          }],
          grid: { left: '20%' }	//下方刻度宽度
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      myEchartsThree() {
        var myChart = this.$echarts.init(document.getElementById('echartsMainThree'));
        var option = {
          yAxis: {
            // max:20,// 总行高
            min: 40,	// 最低显示值
            splitNumber: 5	//间隔
          },
          series: [{
            type: 'line',	//折线图
            smooth: true,	//折线转折用曲线
          }]
        }
        myChart.setOption(option);
      },
      myEchartsFour() {
        var myChart = this.$echarts.init(document.getElementById('echartsMainFour'));
        var option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            data: ['初中及以下', '高中', '中专及以下', '中专/中技', '大专', '本科', '博士', '硕士']
          },
          series: [
            {
              //饼图
              type: 'pie',
              radius: ['50%', '70%'],
              // avoidLabelOverlap: false,
              label: {
                // show: true,
                position: 'center',
                emphasis: {
                  show: true
                }
              },
              labelLine: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold',
                  formatter: '{b}{c}'
                }
              },
              data: [
                { value: 335, name: '初中及以下' },
                { value: 310, name: '高中' },
                { value: 234, name: '中专及以下' },
                { value: 135, name: '中专/中技' },
                { value: 1548, name: '大专' },
                { value: 1348, name: '本科' },
                { value: 200, name: '博士' },
                { value: 100, name: '硕士' },
              ]
            }]
        };
        myChart.setOption(option);
      }

    },
    mounted() {
      this.myEchartsOne();
      this.myEchartsThree();
    }
  }
</script>






echart中国地图
	a.vue
	<!-- 
    <chinaEcharts></chinaEcharts>
		<script>
			import chinaEcharts from "./ChinaEcharts2";
			export default{
				components:{
					chinaEcharts
				}
			}
		</script> 
  -->
	ChinaEcharts/index.vue
	ChinaEcharts/china.json





多个循环chart
  <div v-for="(item,index) in target" :key="index">
    <div class="table-item-inner" @click="changeTabDown($event)">
    <div class="salary-chart-wrap">
      <div class="Echarts">
        <div class="roseChart" style="width: 500px;height:350px;"></div>
      </div>
    </div>
  </div>
  <script>
    var app = new Vue({
      methods:{
        myEchartsMore(){
          var roseCharts = document.getElementsByClassName('roseChart');
          for (var i = 0; i < roseCharts.length; i++) { // 通过for循环，在相同class的dom内绘制元素
            var myChart = this.$echarts.init(roseCharts[i]);
            var option = {
              title: {
                text: this.target.name
              },
              tooltip: {
                trigger:'axis',
                // axisPointer: { type: 'cross' }
              },
            xAxis: {
              data:[this.chartMax[i][0],'','','',this.chartMax[i][1]]
            },
            yAxis: {
              // max:20,// 总行高
            },
            series: [{
              name: '人数',
              type: 'bar',
              data: [89932, 1442812, 346888, 1442812, 110471],
              barWidth:'40%',
              itemStyle:{
                barBorderRadius:[5,5,0,0],
                color:'#12c19e',
              },
            }],
            grid:{left:'20%'}
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          }
        },
        // 点击下拉框
        changeTabDown(e){
          // console.log(e.currentTarget.querySelector('.el-icon-arrow-up'))
          // el-icon-arrow-up
          // console.log(e.currentTarget.parentNode)
          let list=e.currentTarget.parentNode.classList
          let isOpen=false
          let listArr=e.currentTarget.querySelector('.el-icon-arrow-down')
          for(let i=0;i<list.length;i++){
            // console.log(list[i])
            if(list[i]=='open'){
            isOpen=true
            }
          }
          if(isOpen){
            list.remove('open')
            listArr.style.transform='rotate(0)'
          }else{
            list.add('open')
            listArr.style.transform='rotate(180deg)'
          }
        }
      },
      mounted(){
        this.myEchartsMore();
      }
    })
  </script>

